<template>
  <a-form-model
    ref="ruleForm"
    v-loading="loading"
    :model="formData"
    :rules="rules"
  >
    <a-row>
      <a-col span="8">
        <a-form-model-item
          label="资产名称"
          prop="materialName"
        >
          <a-input-search
            v-model="formData.materialName"
            placeholder="请选择"
            :disabled="state === 3"
            @search="openMaterial"
            @click="openMaterial"
          />
        </a-form-model-item>
      </a-col>
      <a-col span="8">
        <a-form-model-item label="资产编码">
          <BaseInput
            v-model="formData.materialCode"
            disabled
          />
        </a-form-model-item>
      </a-col>
      <a-col span="8">
        <a-form-model-item label="规格型号">
          <BaseInput
            v-model="formData.materialModel"
            disabled
          />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col span="8">
        <a-form-model-item label="单位">
          <BaseInput
            v-model="formData.materialUnit"
            disabled
          />
        </a-form-model-item>
      </a-col>
      <a-col span="8">
        <a-form-model-item
          label="品牌厂家名称"
          prop="supplierName"
        >
          <a-input-search
            v-model="formData.supplierName"
            placeholder="请选择"
            :disabled="state === 3"
            @search="openSupplier"
            @click="openSupplier"
          />
        </a-form-model-item>
      </a-col>
      <a-col span="8">
        <a-form-model-item label="品牌厂家编码">
          <BaseInput
            v-model="formData.supplierCode"
            disabled
          />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col span="8">
        <a-form-model-item label="新旧程度">
          <a-select
            v-model="formData.oldAndNewId"
            :disabled="state === 3"
          >
            <a-select-option
              v-for="item in oldAndNewArr"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col span="8">
        <a-form-model-item label="单价类别">
          <a-select
            v-model="formData.unitPriceTypeId"
            :disabled="state === 3"
            @change="unitPriceTypeChange"
          >
            <a-select-option
              v-for="item in optionArr"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col span="8">
        <a-form-model-item
          label="采购单价"
          prop="unitPrice"
        >
          <BaseInputNumber
            v-model="formData.unitPrice"
            :precision="2"
            :disabled="state === 3"
          />
        </a-form-model-item>
      </a-col>
      <a-col span="8">
        <a-form-model-item
          label="数量"
          prop="quantity"
        >
          <BaseInputNumber
            v-model="formData.quantity"
            :precision="3"
            :disabled="state === 3"
          />
        </a-form-model-item>
      </a-col>
      <a-col span="8">
        <a-form-model-item label="金额">
          <BaseInput
            v-model="formData.totalPrice"
            disabled
          />
        </a-form-model-item>
      </a-col>
    </a-row>
    <material-list
      ref="materialList"
      @createList="getMaterial"
    />
    <supplier-list
      ref="supplierList"
      @createList="getSupplier"
    />
  </a-form-model>
</template>

<script>
import { parameterInfo } from '@/api/material/assets/parameter'
import { selectOption } from '@/api/material/goods/goods'

export default {
	name:'a'+Date.now(),
    props: {
        state: {
            type: Number
        },
        row: {
            type: Object
        }
    },
    data() {
        return {
             loading:false,
            formData: {
                materialName: '',
                materialCode: '',
                materialModel: '',
                materialUnit: '',
                supplierName: '',
                supplierCode: '',
                oldAndNewId: '',
                unitPriceTypeId: null,
                unitPrice: '',
                quantity: '',
                totalPrice: '',
                supplierId: null,
                materialId: null
            },
            optionArr: [],
            rules: {
                materialName: { required: true, message: '资产名称不能为空', trigger: 'change' },
                supplierName: { required: true, message: '品牌厂家名称不能为空', trigger: 'change' },
                quantity: { required: true, message: '数量不能为空', trigger: 'blur' },
                unitPrice: { required: true, message: '采购单价不能为空', trigger: 'blur' }
            },
            unitPriceType: '',
            oldAndNewArr: []
        }
    },
    mounted: function() {
        this.getOption()
        this.getOldAndNew()
        console.log(this.row)
        this.$nextTick(() => {
            if (this.state !== 1) {
                this.getEditInfo()
            }
        })
    },
    methods: {
        unitPriceTypeChange(val) {
            this.optionArr.map(function(item) {
                if (val === item.id) {

                }
            })
        },
        getMaterial: function(row) {
            this.formData.materialName = row.name
            this.formData.materialCode = row.code
            this.formData.materialModel = row.specificationModel
            this.formData.materialUnit = row.unit
            this.formData.materialId = row.id
        },
        openMaterial: function() {
            this.$refs.materialList.open()
        },
        openSupplier: function() {
            this.$refs.supplierList.open()
        },
        getSupplier: function(row) {
            this.formData.supplierName = row.name
            this.formData.supplierCode = row.code
            this.formData.supplierId = row.id
        },
        getOption: function() {
            selectOption({
                type: 23
            }).then(res => {
                if (res.code === 200) {
                    this.optionArr = res.data
                    this.formData.unitPriceTypeId = this.optionArr[0].id
                }
            })
        },
        getOldAndNew() {
            selectOption({
                type: 24
            }).then(res => {
                if (res.code === 200) {
                    this.oldAndNewArr = res.data
                    this.formData.oldAndNewId = this.oldAndNewArr[0].id
                }
            })
        },
        // 获取编辑回显数据
        getEditInfo() {
            this.formData.materialName = this.row.materialName
            this.formData.materialCode = this.row.materialCode
            this.formData.materialModel = this.row.materialModel
            this.formData.materialUnit = this.row.materialUnit
            this.formData.supplierName = this.row.supplierName
            this.formData.supplierCode = this.row.supplierCode
            this.formData.oldAndNewId = this.row.oldAndNewId
            this.formData.unitPriceTypeId = this.row.unitPriceTypeId
            this.formData.unitPrice = this.row.unitPrice
            this.formData.quantity = this.row.quantity
            this.formData.totalPrice = this.row.totalPrice
            this.formData.supplierId = this.row.supplierId
            this.formData.materialId = this.row.materialId
        },
        temporaryStorage() {
            this.$refs.ruleForm.validate((valid, object) => {
                if (valid) {
                    this.loading = true
                    this.formData.id = this.row.id
                    parameterInfo(this.formData).then(res => {
                        if (res.code === 200) {
                            this.row = res.data
                            this.$message.success('暂存成功')
                            this.getEditInfo()
                        }
                        this.loading = false
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>
